import React, { useMemo, useState, useEffect } from 'react'
import './ShopDetails.css'
import { Button, SearchBar, Tabs, Toast, NavBar } from 'antd-mobile'
import axios from 'axios'
import { useNavigate, useLocation } from 'react-router-dom'
export default function ShopDetails() {
    const navigate = useNavigate()
    const location = useLocation()
    const [shop, setShop] = useState(location.state)

    const back = () => {
        navigate(-1)
      }
  return (
    <div className='shopdetails'>
        <div className='shopdetails-top'>
            <NavBar onBack={back} ><b>店铺详情</b></NavBar>
        </div>
        <div className='shopdetails-content'>
            <div className='shopdetails-content-img'>
                <img src={shop.shopimg} alt="" />
            </div>
            <div>
                <p><b>{shop.name}</b></p>
            </div>
            <div className='shopdetails-content-text'>
                <span>
                    关注
                    {shop.concern}
                </span>
                <span>
                    已售
                    {shop.sold}
                </span>
            </div>
            <div className='shopdetails-content-desc'>
                <div className='shopdetails-content-desc-img'>
                    <p className='shopdetails-content-desc-title'>店铺资质</p>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' alt="" />
                </div>
                <p>经营类型：XXXXX</p>
                <p>已按要求上传营业执照，相关资质</p>
            </div>
            <div className='shopdetails-content-desc'>
                <p className='shopdetails-content-desc-title'>店铺服务</p>
                {
                    shop.serve.map((item, index) => {
                        return (
                            <div key={index} className='shopdetails-content-desc-item'>
                                <p>{item.setname}</p>
                                <span className='shopdetails-content-desc-desc'>
                                    {item.setdesc}
                                </span>
                            </div>
                        )
                    })
                }
            </div>
            <div className='shopdetails-content-desc'>
                <p className='shopdetails-content-desc-title'>店铺简介</p>
                <span className='shopdetails-content-desc-desc'>
                    {shop.desc}
                </span>
            </div>
        </div>
    </div>
  )
}
